<!--
 * @Project_description: {{routerName}}页面
-->
<template>
  <d2-container class="page">
    <!-- 顶部内容 -->
    <template slot="header">
      <div class="base-header">
        <!-- 左边 -->
        <div class="base-header-l">
          <el-form
            :inline="true"
            :model="request"
            ref="request"
            class="header-form-inline"
            label-position="right"
            :disabled="loading"
            label-width="100px">
            <!-- 文本 -->
            <el-form-item label="字符串" prop="link">
              <el-input v-model="request.link" placeholder="请输入字符串" clearable></el-input>
            </el-form-item>
            <!-- 筛选 -->
            <el-form-item label="状态" prop="state">
              <el-select v-model="request.state" placeholder="请选择状态">
                <el-option  label="启用" :value="0" />
                <el-option  label="禁用" :value="1" />
              </el-select>
            </el-form-item>
            <!-- 日期 -->
            <el-form-item label="日期" prop="date">
              <el-date-picker
                v-model="request.date"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <!-- 下方按钮组-->
          <div class="base-header-b" style="margin-left: 95px">
            <div class="base-header-btn">
              <el-button type="primary" @click="select" :disabled='loading'>搜索</el-button>
            </div>
            <div class="base-header-btn">
              <el-button plain @click="reset" :disabled='loading'> 重置 </el-button>
            </div>
          </div>
        </div>
        <!-- 右边按钮组 -->
        <div class="base-header-r">
          <div class="base-header-btn">
            <el-button type="primary" @click="$refs.add.init()" v-if='_auth("add")'>添加</el-button>
          </div>
          <!-- 导入下载模板 -->
          <div class="base-header-btn">
            <el-button type="warning" @click="$refs.importExl.open=true" v-if='_auth("import")'>导入</el-button>
            <y-import-exl @click='importExl'  @uploadTemplate='uploadTemplate' ref='importExl' />
          </div>
          <div class="base-header-btn">
            <el-button type="info" @click="expTableList" v-if='_auth("export")'>导出</el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 内容 -->
    <el-table :data="list" ref="list" style="width: 100%" v-loading="loading">
      <el-table-column
        width="80"
        type="index"
        label="序号"
        align="center"
        :index="(p) => p + 1 + (request.{{page}} - 1) * request.{{size}}" />
      <el-table-column label="图片">
        <template slot-scope="{ row }">
          <y-image  v-model="row.avatarImg"></y-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="昵称"> </el-table-column>
      <el-table-column prop="phone" label="账号"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span  class="text-info" v-if="row.state == 0">启用</span>
          <span  class="text-error" v-if="row.state == 1">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="备注">
        <template slot-scope="{ row }">
          <y-remark  v-model='row.intro' />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <span class="base-row-btn" @click="update(row)" v-if='_auth("edit")'>修改</span>
          <el-popconfirm title="确定从列表中移除吗？" @confirm="deleteBy(row)" v-if='_auth("del")'>
            <span class='base-row-btn' slot="reference">删除</span>
          </el-popconfirm>
          <!-- <el-button type="success" icon="el-icon-view" circle @click="view(row)"></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <addVue ref="add" @load="getList" />
    <!-- 底部 -->
    <template slot="footer">
      <div class="base-footer-btn">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="request.{{size}}"
          :current-page.sync="request.{{page}}"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
  import addVue from './components/add.vue'
  export default {
    name: '{{name}}',
    // import引入的组件需要注入到对象中才能使用
    components: {
      addVue,
    },
    data() {
      // 这里存放数据
      return {
        // 加载状态
        loading: false,
        //数据
        list: [],
        //总条数
        total: 0,
        //请求参数
        request: {
          link: '',
          {{size}}: 10,
          {{page}}: 1,
          date: '',
          state: '',
        },
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList()
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
      // list
      async getList() {
        this.loading = true
        try {
          let res = await this.$api.{{name}}.list(this.request)
          this.total = res.data.total
          this.list = res.data.rows
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      },
      // put
      update(row) {
        //重新copy一份对象，不要在原本上修改
        let rows =this.deepClone(row)
        this.$refs.add.init(rows)
      },
      //delete
      async deleteBy(row) {
          let rows={
            {{name}}Id:row.{{name}}Id
          }
        // 删除
        await this.$api.{{name}}.del(rows)
        this.$message.success('删除成功')
        this.getList()
      },
      //翻页
      handleCurrentChange(val) {
        this.request.{{page}} = val
        this.getList()
      },
      // 换页码
      handleSizeChange(e) {
        this.request.{{size}} = e
        this.getList()
      },
      // 搜索
      select() {
        this.request.{{page}} = 1
        this.getList()
      },
      // 重置
      reset() {
        this.request.{{page}} = 1
        this.$refs.request.resetFields()
        this.getList()
      },
      /*表格操作*/
      // 导入表格
      importExl({ header, results }){
        console.log(header, results)
        this.$message.success('导出成功')
        this.getList()
      },
      //下载空模板
      uploadTemplate(){
        //如果这个不满足,请查看控制台自行复制需要的
        let table = this._getTable(this.$refs.list)
        this._expTable(table, '{{routerName}}导入模板')
      },
      // 导出list
      async expTableList() {
        const loading = this.$loading({
          text: '正在下载...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        // 获取对象
        //如果这个不满足,请查看控制台自行复制需要的
        let table = this._getTable(this.$refs.list)
        //重新copy一份对象，不要在原本上修改
        let req = JSON.parse(JSON.stringify(this.request))
        req.{{page}} = 1
        req.{{size}} = 9999
        try {
          let res = await this.$api.{{name}}.list(req)
          this._expTable(table, '{{routerName}}表', res.rows)
          loading.close()
        } catch (error) {
          this.$message.error('导出失败')
          loading.close()
          this.$log.push(error)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
</style>
